<template>
  <div class="departments">
    <el-card class="mycard">
      <el-tabs v-model="activeName">
        <el-tab-pane label="组织架构" name="first"></el-tab-pane>
      </el-tabs>
      <!-- 内容结构 -->
      <div class="box">
        <!-- 头部 -->
        <treeTools class="myborder" :item="headData"></treeTools>
        <!-- 内容 -->
        <el-tree class="mytree" :data="data" default-expand-all>
          <!-- slot-scope="{ data }"：得到当前节点中对应的数据源 -->
          <treeTools slot-scope="{ data }" :item="data" @updateData='getDeptData' @addShow='addShow'  @editShow='editShow'></treeTools>
        </el-tree>
      </div>
    </el-card>
    <!-- 实现传回的事件 -->
<addDept :dialogShow.sync='dialogShow' :id="currentId" @closeDailog="val=>(dialogShow= val)" ref="myAddDeft" ></addDept>
  </div>
</template>

<script>
import { getDeptApi } from '@/api/departments'
export default {
  data () {
    return {
      // 头部结构的数据源
      headData: {},
      activeName: 'first',
      data: [],
      dialogShow:false,
      currentId:''
    }
  },
  methods: {
    // fn (data) {
    //   console.log(data)
    // },
    // 打开编辑面板
    editShow(id){
      // 调用子组件中的方法，去获取当前操作的部门详情
      this.$refs.myAddDeft.getDeptDetail(id)
        this.dialogShow=true
    },
    // 打开新增面板
    addShow(id){
      this.dialogShow=true,
      // 保存当前操作元素的id
      this.currentId = id
    },
    // turnData(arr,pid){
    //   const res= []
    //   arr.forEach(item=>{
    //     if (item.pid === pid) {
    //       const son =turnData(arr,item.id)
    //       if (item.length !== 0) {
    //         ite.children = son
    //       }
    //       res.push(item)
    //     }
    //   })
    //   return res
    // },
    turnData(arr, pid) {
      //定义一个变量用来存储整个菜单的数据
      const res = [];
      arr.forEach((item) => {
        if (item.pid === pid) {
          //子菜单
          const son = this.turnData(arr, item.id);
          if (son.length !== 0) {
            item.children = son;
          }
          res.push(item);
        }
      });
      return res;
    },
    // 定义获取数据的方法
    async getDeptData(){
    // 请求部门的数据
const res = await getDeptApi()
// 保存部门数据  //绑定数据
 this.data=this.turnData(res.data.depts,'')
  // 保存头部数据：就是列表中的第一条数据
    this.headData = res.data.depts[0]
    // 给头部数据手动添加属性：manager
    this.headData.manager = '负责人'
    this.headData.isHead = true
    }
  },

  async created () {
    // 请求部门数据
    // const res = await getDeptApi()
    // // 保存部门数据
    // this.data = res.data.depts
    // // 保存头部数据：就是列表中的第一条数据
    // this.headData = res.data.depts[0]
    // // 给头部数据手动添加属性：manager
    // this.headData.manager = '负责人'
    // this.headData.isHead = true
    this.getDeptData()
  },
  components: {
    treeTools: () => import('./components/tree-tools.vue'),
    addDept: () => import('./components/add-dept.vue')
  }
}
</script>

<style lang="scss">
.departments {
  margin: 20px;
  .mycard {
    padding: 40px;
    .box {
      padding: 30px 60px;
      .myborder {
        border-bottom: 1px solid #ccc;
        line-height: 50px;
      }
      .left {
        font-weight: 700;
        i {
          margin-right: 8px;
        }
      }
      .right {
        text-align: right;
        span {
          margin-right: 20px;
        }
        .el-dropdown-link {
          font-size: 16px;
        }
      }
      .mytree {
        margin-top: 10px;
      }
    }
  }
}
</style>
